<script setup>
import ArticleDetail from '@/components/articleDetail.vue'
import Comments from '@/components/comments.vue';
import upImg from "@/components/upImg.vue";
import {useRouter,useRoute} from 'vue-router'
import {getArticleApi,delArticleApi} from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onUpdated, reactive, ref } from 'vue'
import {addCommentApi,selectArticleCommentApi,delCommentApi} from '@/api/commend'
import { useUserStore } from "@/stores/user";
//登录用户信息
const userStore = useUserStore()
const userInfo = userStore.userInfo
//路由
const route = useRoute()
const router = useRouter()

//帖子id
const articleId = ref()
setArticleId()
function setArticleId(){
  const id = parseInt(route.query.articleId)
  if(id){
    articleId.value = id 
    localStorage.setItem('articleId',id)
  }else{
    articleId.value = localStorage.getItem('articleId')
  }
}
//帖子内容详情
const articleDetail = ref({})
getArticle(articleId.value)
async function getArticle(articleId){
  try{
    const resp = await getArticleApi(articleId)
    const article = resp.data.data
    articleDetail.value = article
  }catch(e){
    console.log(e)
  }
}
//-------------帖子评论详情-------------------------
const allComments = reactive({
  commentList:[],
  pageInfo:{}
})
const page = ref(0)
getAllComments(articleId.value,0)
async  function getAllComments(articleId,page){
  try{
    const resp = await selectArticleCommentApi(articleId,page)
    if(resp.data.code === 200){
      allComments.commentList = []
      allComments.pageInfo = resp.data.data.page
      const comments = resp.data.data.content
      console.log(comments)
      if(comments.length !== 0){
        comments.forEach(comment => {
          allComments.commentList.push(comment)
        });
      }
    }
  }catch(e){
      console.log(e)
  }
}

//发送评论的请求数据
const commentForm = {
  text:''
}
const commentFormRef = ref(null)
const commentFormRules = {
  text:[{
    require:true,
    message:'评论内容不能为空',
    trigger:'blur'
  }]
}
//发送评论
const sendComment = async ()=>{
  const reqData = {
  user_id:'',
  post_id:'',
  content:'',
  parent_comment_id:''
}
  reqData.user_id=userInfo.id
  reqData.post_id=articleId.value
  reqData.content=commentForm.text
  reqData.parent_comment_id=null
  if(reqData.content === ''){
    ElMessage.warning('请输入内容')
    return
  }
  try{
    console.log(reqData)
    const resp = await addCommentApi(reqData)
    if(resp.data.code === 200){
       //刷新 重新获取文章详情
       getAllComments(articleId.value,page.value)
      //router.go(0)
      commentFormRef.value.resetFields()
      ElMessage.success('评论成功')
    }  
  }catch(e){
    console.log(e)
    ElMessage.error(e.message)
  } 

}
//强制刷新输入框视图 避免不能输入值
function changeValue(e) {
    this.$forceUpdate()
}
//删除评论
const onDelReplay =async (id)=>{
  try{
    const resp =await delCommentApi(id)
    if(resp.data.code === 200){
      getAllComments(articleId.value,page.value)
      ElMessage.success('删除成功')
    }
  }catch(e){
    console.log(e)
  }
   
}
//-------------一级评论下的评论--------------------------
const showDialog = ref(false)
const replayName = ref(null)
const commendId = ref(null)
const onReplay = (id,name)=>{
  showDialog.value = true
  replayName.value = name
  commendId.value = id
}
const firstComReplyForm={
    text:''
}
const firstComReplyRef = ref(null)
const firstComReplyRules = {
  text:{
    require:true,
    message:'回复内容不能为空',
    trigger:'blur'
  }
}
const confirmReplay = async ()=>{
   try{
    const reqData = {
      user_id:'',
      post_id:'',
      content:'',
      parent_comment_id:''
    }
    reqData.user_id=userInfo.id
    reqData.post_id=articleId.value
    reqData.content=firstComReplyForm.text
    reqData.parent_comment_id=commendId.value
    const resp = await addCommentApi(reqData)
    if(resp.data.code === 200){
      firstComReplyRef.value.resetFields()
      showDialog.value = false
      getAllComments(articleId.value,0)
      ElMessage.success('回复成功')
    }
   }catch(e){
    console.log(e)
   }
}
</script>
<template>
  <div class="detail-box">
    <!-- 文章详情 -->
    <div class="article">
      <ArticleDetail
      :article="articleDetail"
      ></ArticleDetail>
      <!-- 评论内容 -->
      <Comments
      :showReplay="true"
      :commentInfo="allComments"
      :postUserId = "articleDetail.user.id"
      @onClickReplay="onReplay"
      @onDelReplay="onDelReplay"
      ></Comments>
      <!--弹出回复输入框-->
      <el-dialog 
      :title="'回复'+replayName"
      v-model="showDialog">
        <div>
          <el-form 
          ref="firstComReplyRef"
          :rules="firstComReplyRules"
          :model="firstComReplyForm"
          :inline="true">
            <el-form-item prop="text">
              <el-input 
              @input="changeValue"
              v-model="firstComReplyForm.text" 
              placeholder="请输入回复内容" 
              clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span class="dialog-footer">
          <el-button 
          type="primary" 
          @click="confirmReplay">确定</el-button>
        </span>
      </el-dialog> 
    </div>
    <!-- 评论输入框 -->
    <div class="comment">
      <el-form 
      class="form"
      :rules="commentFormRules"
      :model="commentForm"
      ref="commentFormRef">
        <el-form-item  class="row input" prop="text">
          <el-input 
          autosize
          @input="changeValue"
          v-model="commentForm.text"
          type="textarea"
          placeholder="善语结善缘，恶语伤人心~">
          </el-input>
        </el-form-item>
        <el-form-item class="row send-button-box">
           <el-button
           class="send-button"
          @click="sendComment"
          >发送</el-button>
        </el-form-item>
      </el-form>
    </div> 
  </div>
</template>
<style lang="scss" scoped>
.detail-box{
 // width: 80%;
  .article{
    height: 76vh;
    overflow: scroll;
  }
  .comment {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

.form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

.row.input {
    margin-bottom: 10px;
  }

.el-input {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 10px;
    transition: border-color 0.3s ease-in-out;
  }

.el-input:hover {
    border-color: #999;
  }

.el-input:focus {
    border-color: #333;
    outline: none;
  }

.el-input::placeholder {
    color: #aaa;
    font-style: italic;
  }

.row.send-button-box {
    display: flex;
    justify-content: flex-end;
  }

.send-button {
    background-color:var(--el-color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  }

.send-button:hover {
    background-color: #337ab7;
  }
}
::-webkit-scrollbar{
    display: none;
} 
</style>